<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('待处理来电记录')"/>
    <link th:href="@{/ajax/libs/bootstrap-tagsinput/tagsinput.css}" rel="stylesheet">
    <link th:href="@{/ajax/libs/jQuery-ui/jquery-ui.css}" rel="stylesheet">
    <link th:href="@{/css/iconfont/iconfont.css}" rel="stylesheet">
    <link rel="stylesheet" type="text/css" th:href="@{/ajax/libs/qxEasyUI/themes/default/easyui.css}">
</head>

<style>
    label {
        font-weight: bold;
    }
    @font-face {
        font-family: 'huawen';
        src: url("/fonts/huawen.woff2");
    }
    .modal-backdrop {
        filter: alpha(opacity=0)!important;
        opacity: 0!important;
    }
    .forbidden {
        background-color: #eee !important;
        border: 1px solid #eee !important;
    }
</style>
<body style="background-color: #F4F6FA;letter-spacing:2px;font-family:'huawen' ;font-weight: bold">
<div class="main-content" style="margin: 0;padding: 0;">
    <form id="telInputForm" th:object="${telGetDeal}" class="form-horizontal" style="background-color: #F4F6FA">
        <input id="pkId" name="pkId" th:field="*{pkId}" type="hidden">
        <input id="wsCode" name="wsCode" th:field="*{wsCode}" type="hidden">
        <input id="wsKey" name="wsKey" th:field="*{wsKey}" type="hidden">
        <input name="callId" th:field="*{callId}" type="hidden">
        <input name="tapeId" th:field="*{tapeId}" type="hidden">
        <input id="lable" name="lable" type="hidden">
        <div class="col-sm-12" style="display: flex">
            <!--     左       -->
            <div class="col-sm-8 entering-page">
                <!--    历史来电    -->
                <div class="col-sm-12 entering-top">
                    <div>历史来电数:<strong>[[${history}]]/[[${noLike}]]</strong></div>
                    <!--                    <div>不满意:<strong>[[${noLike}]]</strong></div>-->
                    <div>常涉问题:<strong>[[${problem}]]</strong></div>
                </div>
                <!--事发地址-->
                <div class="col-sm-12 entering-mt">
                    <div class="form-group">
                        <label class="col-sm-2 control-label entering-pd">事发地址：</label>
                        <div class="col-sm-8">
                            <input name="fmAddress" th:field="*{fmAddress}" placeholder="请输入"
                                   class="form-control scene theAddress" type="text">
                        </div>
                        <div class="col-sm-1 control-label" style="margin: 3px 0 0 -25px;">
                            <input id="sensitiveId" type="hidden" name="sensitiveId"
                                   th:value="${sensitive == null ? '':sensitive.id}"/>
                            <!--                            <button type="button" class="btn btn-sm btn-primary"-->
                            <!--                                    style="margin-top: -7px;color: #206ef7;background-color: white"-->
                            <!--                                    onclick="labelPage()">标签-->
                            <!--                            </button>-->
                            <button type="button" class="btn btn-sm btn-primary"
                                    style="margin-top: -7px;color: #206ef7;background-color: white"
                                    onclick="sensitivity('read')">敏感信息
                            </button>
                        </div>
                        <div class="col-sm-1 control-label" style="margin: 3px 0 0 10px;">
                            <button type="button" class="btn btn-sm btn-primary"
                                    style="margin-top: -7px;color: #206ef7;background-color: white"
                                    onclick="labelPage()">辅助标注
                            </button>
                        </div>
                    </div>
                </div>
                <!--来电类容-->
                <div class="col-sm-12">
                    <div class="form-group">
                        <label class="col-xs-2 control-label entering-pd">来电内容：</label>
                        <div class="col-xs-10">
                            <textarea name="fmContent" th:field="*{fmContent}" maxlength="1000"
                                      class="form-control phoneRemark" rows="3"
                                      style="height: 100px;resize: vertical" readonly UNSELECTABLE="on"></textarea>
                            <span>还可以输入<i class="phoneRemarkI">1000</i>个文字</span>
                        </div>
                    </div>
                </div>
                <!--来电人名等，关键词等，分两个部分-->
                <!--来电人名等-->
                <div class="col-sm-6">
                    <div class="col-sm-12">
                        <div class="form-group">
                            <label class="col-sm-4 control-label is-required entering-pd">来电人名：</label>
                            <div class="col-sm-8">
                                <input name="fromName" th:field="*{fromName}" placeholder="请输入"
                                       class="form-control phoneName" type="text"
                                       maxlength="5" required="">
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12">
                        <div class="form-group">
                            <label class="col-sm-4 control-label entering-pd">联系电话：</label>
                            <div class="col-sm-8">
                                <input name="fromTelA" th:field="*{fromTelA}" placeholder="请输入"
                                       class="form-control relationPhone"
                                       type="text"
                                       maxlength="11" required="">
                            </div>
                            <!-- 屏蔽下面class为col-sm-1的其中一个div即可-->

                            <div id="bingo"
                                 th:style="'display:' + @{(${telGetDeal.hideTel} == 5 ? 'none' : 'inline-block')} + ''"
                                 class="col-sm-1 iconfont-style-g">
                                <div class="iconfont icon-gouxuan" style="font-size: 30px"></div>
                            </div>
                            <div id="bug"
                                 th:style="'display:' + @{(${telGetDeal.hideTel} != 5 ? 'none' : 'inline-block')} + ''"
                                 style="display: none" class="col-sm-1 iconfont-style-r">
                                <div class="iconfont icon-close-square-fill" style="font-size: 39px"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12">
                        <div class="form-group">
                            <label class="col-sm-4 control-label is-required entering-pd">来电类别：</label>
                            <div class="col-sm-8">
                                <select name="dfmClaNo" id="dfmClaNo" required
                                        th:with="telTypes=${@commonServiceImpl.findTelType()}"
                                        onchange="dropChgSendTextOnly(this,'dfmClaName');"
                                        class="form-control formSelect">
                                    <option value="">--请选择--</option>
                                    <th:block th:each="item : ${telTypes}">
                                        <option th:text="${item['CSText']}" th:value="${item['CSValue']}"
                                                th:selected="${item['CSValue'] eq telGetDeal.dfmClaNo}"></option>
                                    </th:block>
                                </select>
                                <input type="hidden" name="dfmClaName" id="dfmClaName" th:value="*{dfmClaName}"/>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12">
                        <div class="form-group">
                            <label class="col-sm-4 control-label entering-pd">内容类别：</label>
                            <div class="col-sm-8">
                                <input id="qxCT" th:value="*{dcntAname}"
                                       style="height:31px;border-radius: 5px;">
                                <input id="txtDcntAcode" name="dcntAcode" type="hidden" th:value="*{dcntAcode}"/>
                                <input id="txtDCntAName" name="dcntAname" type="hidden" th:value="*{dcntAname}"/>
                            </div>
                        </div>
                    </div>
                    <!--                    <div class="col-sm-12">-->
                    <!--                        <div class="form-group">-->
                    <!--                            <label class="col-sm-4 control-label entering-pd">影响范围：</label>-->
                    <!--                            <div class="col-sm-8">-->
                    <!--                                <input name="userName" placeholder="请输入" class="form-control" type="text"-->
                    <!--                                       maxlength="30" required="">-->
                    <!--                            </div>-->
                    <!--                        </div>-->
                    <!--                    </div>-->
                    <div class="col-sm-12">
                        <div class="form-group">
                            <label class="col-sm-4 control-label entering-pd">被诉主体：</label>
                            <div class="col-sm-8">
                                <input name="accSubject" th:field="*{accSubject}" placeholder="请输入" class="form-control"
                                       type="text" id="subject">
                            </div>
                        </div>
                    </div>

                </div>
                <!--关键词等-->
                <div class="col-sm-6">
                    <!--bootstrap关键词等-->
                    <div class="col-sm-12 control-label" style="display: flex">
                        <label style="padding-right: 28px;" class="col-sm-4 control-label">热词:</label>
                        <div class="col-sm-8 control-label" style="margin: 0;padding: 0">
                            <input class="antistop" name="keyWord" th:field="*{keyWord}" type="text" value=""
                                   data-role="tagsinput">
                        </div>

                    </div>
                    <div class="col-sm-12">
                        <div class="form-group">
                            <label class="col-xs-4 control-label">屏蔽号码：</label>
                            <div class="col-xs-8">
                                <label class="check-box">
                                    <input name="hideTel" th:checked="${telGetDeal.hideTel==5}" class="hideTel1"
                                           th:field="*{hideTel}" value="5" type="radio">是
                                </label>
                                <label class="check-box">
                                    <input name="hideTel" th:checked="${telGetDeal.hideTel!=5}" class="hideTel2"
                                           value="0" type="radio">否
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12">
                        <div class="form-group">
                            <label class="col-xs-4 control-label">同意公开：</label>
                            <div class="col-xs-8">
                                <label class="check-box">
                                    <input name="openFrom" th:checked="${telGetDeal.openFrom==1}" th:field="*{openFrom}"
                                           value="1" type="radio">是
                                </label>
                                <label class="check-box">
                                    <input name="openFrom" value="0" th:checked="${telGetDeal.openFrom==0}"
                                           type="radio">否
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12">
                        <div class="form-group">
                            <label class="col-xs-4 control-label">重复来电：</label>
                            <div class="col-xs-8">
                                <label class="check-box">
                                    <input name="repeatFlag" value="1" th:checked="${telGetDeal.repeatFlag==1}"
                                           th:field="*{repeatFlag}" type="radio">是
                                </label>
                                <label class="check-box">
                                    <input name="repeatFlag" value="0" type="radio"
                                           th:checked="${telGetDeal.repeatFlag==0}">否
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12">
                        <div class="form-group">
                            <label class="col-xs-4 control-label">紧急件：</label>
                            <div class="col-xs-8">
                                <label class="check-box">
                                    <input name="mark" th:checked="${telGetDeal.mark==1}"
                                           value="1" type="radio">是
                                </label>
                                <label class="check-box">
                                    <input name="mark" th:checked="${telGetDeal.mark==0}"
                                           value="0" type="radio">否
                                </label>
                                <button type="button" class="btn btn-sm btn-primary" onclick="operatingRecord()"
                                        style="color: #206ef7;background-color: white">
                                    操作记录
                                </button>
                            </div>
                        </div>
                    </div>

                </div>
                <!--交办意见-->
                <div class="col-sm-12" style="margin-left: -5px">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label class="col-xs-4 control-label entering-pd">交办意见：</label>
                            <div class="col-xs-8">
                                <select id="xDealDescSelect" onchange="dropChgSendTextOnly(this,'xdealDesc');"
                                        th:with="district=${@commonServiceImpl.findOpinion()}"
                                        class="form-control formSelect">
                                    <option value="">--请选择--</option>
                                    <option th:each="item : ${district}" th:text="${item['CSText']}"
                                            th:value="${item['CSValue']}"></option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-xs-4 control-label entering-pd">意见详情：</label>
                            <div class="col-xs-8">
                                <textarea name="xdealDesc" style="resize: vertical" id="xdealDesc" th:field="*{xdealDesc}" maxlength="3500" class="form-control opinion" rows="5"></textarea>
                                <span>还可以输入<i class="opinionI">3500</i>个文字</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label class="col-xs-4 control-label entering-pd">坐席备注：</label>
                            <div class="col-xs-8">
                                <select id="xSysDescSelect" onchange="dropChgSendTextOnly(this,'xsysDesc');"
                                        th:with="district=${@commonServiceImpl.findSeatsRemark()}"
                                        class="form-control formSelect">
                                    <option value="">--请选择--</option>
                                    <option th:each="item : ${district}" th:text="${item['CSText']}"
                                            th:value="${item['CSValue']}"></option>
                                </select>


                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-xs-4 control-label">备注内容：</label>
                            <div class="col-sm-8">
                                <textarea name="xsysDesc" style="resize: vertical" id="xsysDesc" th:field="*{xsysDesc}" maxlength="3500"
                                          class="form-control SeatsRemark"
                                          rows="5"></textarea>
                                <span>还可以输入<i class="SeatsRemarkI">3500</i>个文字</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 按钮-->
                <div class="col-sm-12" style="margin-top:10px;margin-bottom: 10px;display: flex;flex-direction: row;">
                    <div style="margin: 0 auto">
                        <button type="button" class="btn btn-sm btn-warning" onclick="draft('退回坐席','121')">退回坐席
                        </button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <button type="button" class="btn btn-sm btn-primary" onclick="temStorage('值班长暂存','122')">暂存
                        </button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <button type="button" class="btn btn-sm btn-info" onclick="draft('值班长解答','136')">回电解答
                        </button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <button type="button" class="btn btn-sm btn-success" onclick="draft('无效来电 当场作废','132')">作废
                        </button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <button type="button" id="orderBtn" class="btn btn-sm btn-info" onclick="createWorkorder()">创建工单
                        </button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <button type="button" class="btn btn-sm btn-warning" onclick="gclose()">关闭
                        </button>&nbsp;
                        <input id="tbStateDesc" name="stateDesc" value="草稿" type="hidden"/>
                        <input id="stateFlag" name="stateFlag" value="101" type="hidden"/>
                    </div>
                </div>
            </div>

            <!--右-->
            <div class="col-sm-4 ">
                <!--  接听人     接通时间       挂断时间等  -->
                <div class="col-sm-12 entering-page">
                    <!--左-->
                    <div class="col-sm-12" style="padding: 5px">
                        <div class="form-group" style="margin: 0">
                            <label class="col-sm-3 control-label  entering-pd" style="font-weight: bold">地区：</label>
                            <div class="col-sm-8">
                                <span style="margin-top: 7px; display: inline-block">[[*{fmAreaName}]]</span>
                            </div>
                        </div>
                        <div class="form-group" style="margin: 0">
                            <label class="col-sm-3 control-label  entering-pd" style="font-weight: bold">流水号：</label>
                            <div class="col-sm-8">
                                <span style="margin-top: 7px; display: inline-block">[[*{wsCode}]]</span>
                            </div>
                        </div>
                        <div class="form-group" style="margin: 0">
                            <label class="col-sm-3 control-label  entering-pd" style="font-weight: bold">提取码：</label>
                            <div class="col-sm-8">
                                <span style="margin-top: 7px; display: inline-block">[[*{wsKey}]]</span>
                            </div>
                        </div>
                        <div class="form-group" style="margin: 0">
                            <label class="col-sm-3 control-label  entering-pd" style="font-weight: bold">接听人：</label>
                            <div class="col-sm-8">
                                <span style="margin-top: 7px; display: inline-block">[[*{liftWorker}]]</span>
                            </div>
                        </div>
                        <div class="form-group" style="margin: 0">
                            <label class="col-sm-3 control-label  entering-pd" style="font-weight: bold">接通时间：</label>
                            <div class="col-sm-8">
                                <span style="margin-top: 7px; display: inline-block" id="answer"
                                      th:text="*{#calendars.format(fromTime,'yyyy-MM-dd HH:mm:ss')}"></span>
                            </div>
                        </div>
                        <div class="form-group" style="margin: 0">
                            <label class="col-sm-3 control-label  entering-pd" style="font-weight: bold">挂断时间：</label>
                            <div class="col-sm-8">
                                <span style="margin-top: 7px; display: inline-block" id="hangup"
                                      th:text="*{#calendars.format(liftEnd,'yyyy-MM-dd HH:mm:ss')}"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <!--类案推荐-->
                <div class="col-sm-12 entering-page" style="min-height: 420px;max-height: 420px;overflow: auto">
                    <div class="col-sm-12 tltieBoder">
                        <div class="blueBorder"></div>
                        <h4 style="margin:0 0 0 10px">类案推荐</h4>
                    </div>
                    <div class="main-content" style="margin: 0;padding: 0">
                        <div class="col-sm-12">
                            <div class="work-order box" style="border-top:0;margin-top: 10px">
                                <div class="content">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-12">

        </div>
    </form>
</div>

<script th:src="@{/ajax/libs/layui/laydate.js}"></script>
<th:block th:include="include :: footer"/>
<script th:src="@{/ajax/libs/bootstrap-tagsinput/tagsinput.min.js}"></script>
<script th:src="@{/ajax/libs/bootstrap-switch/bootstrap-switch.min.js}"></script>
<script th:src="@{/ajax/libs/jQuery-ui/jquery-ui.js}"></script>
<script th:src="@{/ajax/libs/qxEasyUI/jquery.easyui.min.js}"></script>
<script th:src="@{/js/sensitivity.js}"></script>
<script th:src="@{/js/telhandle.js}"></script>
<script th:src="@{/js/teladd.js}"></script>
<script th:src="@{/js/teldetail.js}"></script>


<script>


    // $(document).on("ifChanged", ".hideTel1", function () {
    //     $("#bug").show();
    //     $("#bingo").hide();
    // });
    // $(document).on("ifChanged", ".hideTel2", function () {
    //     $("#bug").hide();
    //     $("#bingo").show();
    // });

    $('#xDealDescSelect').width($('input[name="fromTelA"]').width());
    var prefix = ctx + "system/mTelRcd";
    var workForm = ctx + "system/workForm";

    //    存草稿
    function draft(fpStr, str) {
        $("#tbStateDesc").val(fpStr);
        $('#stateFlag').val(str);
        if ($.validate.form()) {
            let data = $('#telInputForm').serializeArray();
            var config = {
                url: prefix + "/edit",
                type: "post",
                dataType: "json",
                data: data,
                beforeSend: function () {
                    $.modal.loading("正在处理中，请稍候...");
                },
                success: function(result) {
                    successCallback(result);
                }
            };
            $.ajax(config);
        }
    }
    function temStorage(fpStr, str) {
        $("#tbStateDesc").val(fpStr);
        $('#stateFlag').val(str);
        if ($.validate.form()) {
            let data = $('#telInputForm').serializeArray();
            var config = {
                url: prefix + "/edit",
                type: "post",
                dataType: "json",
                data: data,
                success: function(result) {
                    $.modal.msgSuccess('操作成功');
                }
            };
            $.ajax(config);
        }
    }

    function createWorkorder() {
        let data = $('#telInputForm').serializeArray();
        var config = {
            url: workForm + '/createWorkform',
            type: "post",
            dataType: "json",
            data: data,
            beforeSend: function() {
                $('#orderBtn').prop('disabled', true);
                $('#orderBtn').addClass('forbidden');
            },
            success: function (result) {
                $.operate.ajaxSuccess(result);
                $.modal.close();
                if(result.code == 0) {
                    var url = workForm + '/tworkform/' + result.pkId;
                    var options = {
                        title: "拟派工单",
                        width: '80%',
                        height: '80%',
                        url: url,
                        skin: 'layui-layer-gray',
                        btn: 0,
                        shadeClose: false
                    };
                    $.modal.openOptions(options);
                    $.modal.msgSuccess('创建成功');
                }
            },
            complete: function() {
                $('#orderBtn').prop('disabled', false);
                $('#orderBtn').removeClass('forbidden');
            }
        };
        $.ajax(config);
    }
    $('#qxCT').width($('input[name="fromTelA"]').width());
    $('#qxCT').combotree({
        url: '/system/common/findContentCate',
        required: false,
        onSelect: function (record) {
            $("#txtDcntAcode").val(record.id);
            $("#txtDCntAName").val(record.text);
        }
    });

    //    关闭
    function gclose() {
        $.modal.close();
    }

    //修改敏感信息
    var sensitiveInfo = new Object();

    function setSensitiveId(id) {
        // sensitiveInfo.cardId = data[0].value;
        // sensitiveInfo.militaryId = data[1].value;
        // sensitiveInfo.realName = data[2].value;
        // sensitiveInfo.medicalCardNum = data[3].value;
        // sensitiveInfo.other = data[4].value;
        $('#sensitiveId').val(id);
    }

    function getLable(data) {
        $('#lable').val(data);
    }

    function successCallback(result) {
        if (result.code == web_status.SUCCESS) {
            var topWindow = $(window.parent.document);
            var currentId = $('.page-tabs-content', topWindow).find('.active').attr('data-panel');
            var $contentWindow = $('.NAP_iframe[data-id="' + currentId + '"]', topWindow)[0];
            $.modal.close();
            $.modal.msgSuccess('操作成功');
        } else if (result.code == web_status.WARNING) {
            $.modal.alertWarning(result.msg)
        } else {
            $.modal.alertError(result.msg);
        }
        $.modal.closeLoading();
    }

    // function successback(result) {
    //     if (result.code == web_status.SUCCESS) {
    //         var topWindow = $(window.parent.document);
    //         var currentId = $('.page-tabs-content', topWindow).find('.active').attr('data-panel');
    //         var $contentWindow = $('.NAP_iframe[data-id="' + currentId + '"]', topWindow)[0];
    //         $.modal.msgSuccess('操作成功');
    //     } else if (result.code == web_status.WARNING) {
    //         $.modal.alertWarning(result.msg)
    //     } else {
    //         $.modal.alertError(result.msg);
    //     }
    //     $.modal.closeLoading();
    // }

    //类案详情
    function caseDetail(wfId) {
        var url = ctx + "system/test/caseDetail/"+wfId;
        var width = '80%';
        var height = 600;
        var title = "类案详情";
        $.modal.openDialog(title, url,width,height);
    }
</script>
</body>
</html>

